<template>
	<div class="role-list">
		<head-title title="信息--角色管理"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left"></div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add"><el-button type="primary" @click="addCatalog(0)">添加</el-button></div>
				</div>
			</div>
			<p style="height:30px"></p>
			<el-table :data="roleList" border row-key="admin_role_id" :tree-props="{ children: 'children' }">
				<el-table-column label="名称" align="center" prop="name"></el-table-column>
				<el-table-column label="ID" align="center" prop="admin_role_id"></el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="备注" align="center" prop="remark"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.admin_role_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" v-if="scope.row.parent_id == 0" @click="addCatalog(1, scope.row.admin_role_id)">新增</el-button>
						<el-button type="primary" size="mini" @click="edit(scope.row.admin_role_id)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.admin_role_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-dialog title="设置" width="50%" :visible.sync="showDialog" :append-to-body="true" top="20px" destroy-on-close>
			<role :type="type" :admin_role_id="admin_role_id" :superior="superior" @success="init" v-if="showDialog"></role>
		</el-dialog>
	</div>
</template>

<script>
import role from '@/components/layer-dialog/role';
export default {
	data() {
		return {
			roleList: [], // 角色列表
			showDialog: false,
			admin_role_id: '',
			superior: '',
			type: 0
		};
	},
	components: { role },
	methods: {
		// 初始化列表
		init() {
			if(this.showDialog){
				this.showDialog = false
			}
			this.$http(this.$ApiList.RoleList).then(res => {
				this.roleList = [];
				let roleList = res.datas;
				roleList.forEach(a => {
					let children = [];
					if (a.parent_id == 0) {
						roleList.forEach(b => {
							if (b.parent_id == a.admin_role_id) {
								children.push(b);
								a.children = children;
							}
						});
						this.roleList.push(a);
					}
				});
			});
		},
		edit(admin_role_id) {
			this.admin_role_id = admin_role_id
			this.superior = ''
			this.type = 1
			this.showDialog = true
			return
			this.$layer.iframe({
				title: '设置',
				maxmin: true,
				area: ['50%', '60%'],
				content: {
					content: role, //传递的组件对象
					parent: this, //当前的vue对象
					data: {
						admin_role_id: admin_role_id,
						type: 1
					} //props
				}
			});
		},
		addCatalog(superior, admin_role_id) {
			this.admin_role_id = admin_role_id
			this.superior = superior
			this.type = 0
			this.showDialog = true
			return
			this.$layer.iframe({
				title: '设置',
				maxmin: true,
				area: ['50%', '60%'],
				content: {
					content: role, //传递的组件对象
					parent: this, //当前的vue对象
					data: {
						type: 0,
						superior: superior,
						admin_role_id: admin_role_id
					} //props
				}
			});
		},
		// 上下架
		upDown(e, admin_role_id) {
			let data = {
				admin_role_id: admin_role_id
			};
			data.status = e;
			this.$http(this.$ApiList.RoleDown, data).then(res => {
				if (res.code == 200) {
					this.$layer.msg('操作成功');
					this.init();
				}
			});
		},
		del(admin_role_id) {
			let data = {
				admin_role_id: admin_role_id
			};
			this.$confirm('确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http(this.$ApiList.DelRole, data).then(res => {
						if (res.code == 200) {
							this.$layer.msg('删除成功');
							this.init();
						}
					});
				})
				.catch(() => {});
		},
		refreshPage() {
			this.init();
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>

.role-list .menu-dialog .el-input {
	width: 90%;
}

.role-list .tree-view {
	max-height: 350px;
	overflow: overlay;
}

.role-list .el-tree-node__content {
	width: 100%;
}
</style>
